<template>
	<div>
		<div class='message-detail'>
			<p class="title">{{title}}</p>
			<div class="content" ref='content'>
			</div>
			<!-- <div style="text-align: left;" v-if="showLink">
				<p>最新活动链接</p>
				<p v-clipboard:copy="link" v-clipboard:success="onCopy" v-clipboard:error="onError">https://m.xinkuai.com/index/activity.html</p>
			</div> -->
            <div class="send active" v-if="showLink" @click='goto'>立即前往</div>
		</div>
	</div>
</template>
<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				title: '',
                showLink: false,
                //link: 'https://m.xinkuai.com/index/activity.html'
			}
		},
		computed: {
			...mapState(['messageList', 'notice'])
		},
		methods: {
			...mapMutations(['CHECKREAD']),
			getMessage(id) {
				var that = this
				var d = "sessionid=" + userInfo.sessionid + "&userid=" + userInfo.userid + "&id=" + id
				this.axios.post(userInfo.hosturl + '/IOSApi/ajaxReadMessage', d, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(function (data) {
					var data = data.data
					if (data.result == 0) {
						that.title = data.data.title
						that.$refs.content.innerHTML = data.data.content
					} else if (data.result == 1037) {
						loginout(1)
					} else {
						toast(data.error)
					}
				})
            },
            goto(){
                showActive(this.notice.link)
            },
			onCopy: function (e) {
				toast('复制成功')
			},
			onError: function (e) {
				toast('请尝试长按复制')
			},
		},
		mounted() {
			if (!!this.$route.query.notice) {
				this.title = this.notice.title
                this.$refs.content.innerHTML = this.notice.content
                if (this.notice.link) {
                    this.showLink = true;
                } else {
                    this.showLink = false;
                }         
				return
			}
			var id = this.$route.query.id;
			this.getMessage(id);
			var index = this.$route.query.index;
			this.messageList[index].isread = 1;
			this.CHECKREAD();
		}
	}

</script>
<style lang="scss" scoped>
	.message-detail {
		padding-left: 0.4rem;
		padding-right: 0.4rem;
		box-sizing: border-box;
	}

	.title {
		padding: 0.4rem 0;
		margin-bottom: .45rem;
		text-align: center;
		border-bottom: 1px solid #ddd;
		font-size: 0.33rem;
		font-weight: bold;
	}

	.content {
		text-align: left;
		font-size: 0.25rem;

		p:not(:first-child) {
			margin-top: 0.7rem;
		}
	}

</style>
